<script setup>
defineProps({
  product: {
    type: Object,
    required: true
  }
})
</script>

<template>
  <RouterLink
      :to="`/product/${product.id}`"
      class="product-card"
  >
    <div class="image-wrapper">
      <img :src="product.imageUrl" :alt="product.name">
    </div>
    <div class="product-info">
      <h3 class="name">{{ product.name }}</h3>
      <p class="description">{{ product.description }}</p>
      <div class="price">¥{{ product.price.toFixed(2) }}</div>
      <div class="sales">已售 {{ product.salesCount }} 件</div>
    </div>
  </RouterLink>
</template>

<style scoped lang="scss">
.product-card {
  display: block;
  border: 1px solid #eee;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.2s;
  background: white;

  &:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  }

  .image-wrapper {
    aspect-ratio: 1/1;
    overflow: hidden;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.3s;
    }
  }

  .product-info {
    padding: 15px;

    .name {
      font-size: 16px;
      margin: 0 0 8px;
      color: #333;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .description {
      font-size: 12px;
      color: #666;
      margin: 0 0 8px;
      height: 36px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .price {
      color: #cf4444;
      font-size: 18px;
      font-weight: bold;
      margin: 8px 0;
    }

    .sales {
      color: #999;
      font-size: 12px;
    }
  }
}
</style>